<script setup>
import { reactive, onMounted } from 'vue';
import { getCsv } from "@/api"
// import { useI18n } from "vue-i18n"
// const { t } = useI18n();
const list = [{
    title: 'How to register as a member?',
    content: 'The system adopts the invitation system to register new members. In order to ensure the income of registered members and prevent excessive registration from reducing income, new members can only register at the invitation of existing members.'
}, {
    title: 'How to deposit and what payment methods?',
    content: 'The system is open to many countries, we provide international payment methods: usdt (erc20). We also support our own currencies for different countries.'
}, {
    title: 'How can I invest and earn income?',
    content: ' You can buy an robot in the system, and you can get stable automatic swipe income and interest every day. All the income can be withdrawn to your bank card.'
}, {
    title: 'Is there a limit on the purchase amount?',
    content: 'Yes, in order to let more members have the opportunity to obtain income, each account of the system has a maximum purchase amount.'
}, {
    title: 'How to deal with the problems in the operation?',
    content: 'You can contact online customer service at any time to help complete all operations.'
}]

const state = reactive({
    index: -1,
    url: ""
})
onMounted(() => {
    getCsv().then(res => {

        state.url = res.csv2.url
    })
})
const open = () => {
    window.open(state.url)
}
const chose = (index) => {
    state.index = index;
}
</script>
<style scoped>
.text-font-size {
    font-size: 16px;
}
</style>
<template>
    <div class="indent-1.5 text-xs font-semibold pt-2.5 text-center">{{ $t('Customer Service') }}</div>
    <div class="flex flex-col   text-center gap-0.5 pb-4">
        <span class="ml-[0.2rem] text-[0.4rem] color-[#333] text-center">
            If you have any question or need help, please contact online customer service to solve it for you
        </span>
        <span class="ml-[0.14rem] text-[0.4rem] color-[#333]">
            Client Care Hours of Operation (EST):
        </span>
        <span class="ml-[0.14rem] text-[0.4rem] color-[#333]">
            Monday - Sunday
        </span>
    </div>
    <div @click="open" class=" flex flex-col justify-items-center gap-1.5 ">
        <button class="btn btn-primary btn-xs  uppercase text-font-size rounded-full place-self-center">
            {{ $t('Online Services') }}
        </button>
        <span class="font-bold w-[4rem] place-self-center">Your exclusive customer service</span>
    </div>

    <hr style="border: 2px solid #333;margin-top:10px!important;margin-bottom:0px!important">


    <div class="pt-3">
        <div class="text-xs text-[0.5rem] color-[#444] ">Frequently Asked Questions</div>
        <div class=" pt-2">
            <div class="collapse " v-for="(item, index) in list" :key="index">
                <input type="radio" name="my-accordion-1" class="h-1 min-h-1" />
                <div class="collapse-title  p-1 text-[0.25rem] min-h-1 " style="border-bottom-width:1px">
                    {{ $t(item.title) }}
                </div>
                <div class="collapse-content p-1 text-[0.4rem] ">
                    <p style="color: #888;">{{ $t(item.content) }}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="h-1 mb-6"></div>

</template>
